iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
自我挑戰組

JavaScript基礎30天系列 第 20

JS ES6 Template literals 基礎介紹 DAY20

  • 分享至 

  • xImage
  •  

今天我們要來介紹的是
JS ES6 字串的寫法

在前面我們有提到組字串的方式(innerHTML)
我們先來複習一下
https://ithelp.ithome.com.tw/upload/images/20201005/20123039C34BS4hPFl.jpg
CodePen: https://codepen.io/wemyferb/pen/mdEbbpp?editors=1010

這時候若利用 ES6的方式來組字串
https://ithelp.ithome.com.tw/upload/images/20201005/20123039kRwDhpazPa.jpg

CodePen : https://codepen.io/wemyferb/pen/PozYYQe?editors=1010
會發現
我們用了反引號(`)
且利用 ${} 來包著變數
但要注意 ${} 裡面也可以寫表達式
這樣寫是不是輕鬆多了!!!


這裡來說一個小技巧
就是如何在組字串的時候
一樣有emmet的功能

我們把下方程式碼
貼在 setting.json檔案 上面

 "emmet.includeLanguages": {
        "javascript": "html"
    },
    "emmet.triggerExpansionOnTab": true,

https://ithelp.ithome.com.tw/upload/images/20201005/20123039ysxDZRW3wc.jpg
這樣就可以更快速的組出字串啦~~~

那今天的 標籤樣板字面值
就介紹到這裡
明天我們將會開始實作一系列的練習
來讓我們更加熟悉 JS
有任何問題都可以詢問我唷/images/emoticon/emoticon07.gif


上一篇
JS ES6 基礎介紹 DAY19
下一篇
JS 代辦事項 基礎教學(1) DAY21
系列文
JavaScript基礎30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言